<!doctype html>
<html manifest="do-me.manifest" ng-app="do-me">

  <head>
    <title>Do Me</title>
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- <link rel="apple-touch-startup-image" href="startup.png" /> -->
    
    <script src="libs/angular-1.2.16.min.js"></script>
    <script src="libs/angular-touch-1.2.16.min.js"></script>
    <link rel="stylesheet" type="text/css" href="libs/mobile-angular-ui-1.1.0-beta.22/mobile-angular-ui-base.min.css">
    <script src="libs/mobile-angular-ui-1.1.0-beta.22/mobile-angular-ui.min.js"></script>
    <script src="libs/keymaster.min.js"></script>
    <script src="libs/sprintf-0.5.js"></script>
    <script src="libs/humanized_time_span.js"></script>
    <link rel="stylesheet" type="text/css" href="libs/message/themes/message_default.css">
    <script src="libs/message/message.js"></script>
    <script src="libs/backup-0.1.js"></script>

    <script type="text/javascript">
      window.do_me = {mobile: true};

      // Check if a new cache is available on page load.
      // TODO Move this to a background poller to speed up page load and detect
      // new version in long-running instances.
      window.addEventListener('load', function(e) {
        window.applicationCache.addEventListener('updateready', function(e) {
          if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
            // Browser downloaded a new app cache.
            // Swap it in and reload the page to get the new hotness.
            window.applicationCache.swapCache();
            if (confirm("A new version of this site is available. Load it?")) {
              window.location.reload();
            } else {
              alert("Things may not work properly until you reload the page.");
            }
          }
        }, false);
      }, false);

      angular.module('do-me', ['ngTouch', 'mobile-angular-ui']); // define the do-me module

      angular.module('do-me').controller('PageCtrl', function($scope) {
        $scope.page = {};
        $scope.page.ref = 'show-tags';
      });
    </script>
    <script src="storage.js"></script>
    <script src="net.js"></script>
    <script src="search.js"></script>
    <script src="sync.js"></script>
    <script src="tasks.js"></script>
    <script src="message_ctrl.js"></script>
    <script src="search_ctrl.js"></script>
    <script src="sync_ctrl.js"></script>
    <script src="tags_ctrl.js"></script>
    <script src="tasks_ctrl.js"></script>
  </head>
  
  <body ng-controller="PageCtrl">

    <div ng-controller="MessageCtrl"></div> <!-- Just a place holder to load controller. Nothing shown here. -->

    <div ng-controller="SyncCtrl"></div> <!-- Just a place holder to load controller. Nothing shown here. -->

    <div class="sidebar sidebar-left" toggleable parent-active-class="sidebar-left-in" id="mainSidebar">
      <h1 class="app-name">Do Me</h1>
      <div class="scrollable sidebar-scrollable">
        <div class="scrollable-content">
          <div class="list-group" toggle="off" bubble target="mainSidebar">
            <a class="list-group-item" ng-click="page.ref = 'edit-tags'">Edit Tags <i class="fa fa-chevron-right pull-right"></i></a>
            <a class="list-group-item" ng-click="page.ref = 'help'">Help <i class="fa fa-chevron-right pull-right"></i></a>
          </div>
        </div>
      </div>
    </div>

    <div class="app">
      
      <div class="navbar navbar-app navbar-absolute-top">
        <div class="navbar-brand navbar-brand-center" ng-controller="SearchCtrl">
          <span ng-show="page.ref == 'show-tags'">Tags (Lists)</span>
          <span ng-show="page.ref == 'show-tasks' && searchInput == ''">All Not Waiting</span>
          <span ng-show="page.ref == 'show-tasks' && searchInput != ''">{{searchStr.text}}</span>
          <span ng-show="page.ref == 'add-task'">Add Task</span>
          <span ng-show="page.ref == 'edit-task'">Edit Task</span>
          <span ng-show="page.ref == 'edit-tags'">Edit Tags</span>
          <span ng-show="page.ref == 'help'">Help</span>
        </div>
        <div class="btn-group pull-left">
          <div ng-show="page.ref == 'show-tags'" ng-click="toggle('mainSidebar')" class="btn btn-navbar sidebar-toggle">
            <i class="fa fa-bars"></i> Menu
          </div>
          <!-- <div ng-click="page.ref='help'" class="btn btn-navbar"> -->
            <!-- <i class="fa fa-bars"></i> Help -->
          <!-- </div> -->
          <!-- <div ng-click="page.ref='edit-tags'" class="btn btn-navbar"> -->
            <!-- <i class="fa fa-list"></i> Edit Tags -->
          <!-- </div> -->
          <div ng-show="['show-tasks', 'add-task', 'edit-task', 'edit-tags', 'help'].indexOf(page.ref) >= 0" ng-click="page.ref = 'show-tags'" class="btn btn-navbar">
            <i class="fa fa-caret-left"></i> Back
          </div>
        </div>
        <div class="btn-group pull-right">
          <div ng-show="page.ref == 'show-tags' || page.ref == 'show-tasks'" ng-click="page.ref = 'add-task'" class="btn btn-navbar">
            <i class="fa fa-plus"></i> Task
          </div>
        </div>
      </div><!-- /header -->
    
      <div class="app-body">
        <div class="app-content">
          <div class="scrollable">
            <div class="scrollable-content">

              <div ng-show="page.ref == 'show-tags'" ng-controller="TagsCtrl">
                <div class="list-group">
                  <a href="#" class="list-group-item" ng-click="searchFor(''); page.ref = 'show-tasks'">
                    All Not Waiting <i class="fa fa-chevron-right pull-right"></i>
                  </a>
                  <div class="list-group-item" ng-show="presentTags().length == 0">
                    You don't have any lists. Click edit lists above to add some.
                  </div>
                  <a ng-repeat="tag in presentTags() track by $index | orderBy:'text'" href="#" class="list-group-item" ng-click="searchFor(tag.text); page.ref = 'show-tasks'">
                    {{tag.text}} <i class="fa fa-chevron-right pull-right"></i>
                  </a>
                  <a href="#" class="list-group-item" ng-click="searchFor('waiting:only'); page.ref = 'show-tasks'">
                    Waiting <i class="fa fa-chevron-right pull-right"></i>
                  </a>
                  <form class="" ng-submit="tagsCtrl.searchHandler($event, searchInput)">
                    <input type="search" class="form-control app-search" placeholder="Search for text or tag" ng-model="searchInput">
                  </form>
                </div><!-- /list-group -->
              </div>

              <div ng-controller="TasksCtrl"> <!-- need this to be shared between pages -->

                <div ng-show="page.ref == 'show-tasks'">
                  <div class="list-group">
                    <div class="list-group-item" ng-show="getResults().length == 0">
                      Nothing to do!
                    </div>
                    <a ng-repeat="task in getResults() track by $index" href="#" class="list-group-item" ng-click="editTask($index); page.ref = 'edit-task'">
                      <span ng-bind-html="linkify(task.text)" style="white-space:normal;"></span>
                      <i class="fa fa-chevron-right pull-right"></i>
                      <br>
                      <small ng-repeat="tag in task.tags">{{tag}} </small>
                    </a>
                  </div>
                </div><!-- /tasks page -->

                <div ng-show="page.ref == 'add-task'">
                  <div class="list-group">
                    <form>
                      <div class="list-group-item">
                        <textarea placeholder='Eg, "Hang shelves"' ng-model="newTask" class="form-control"></textarea>
                      </div>
                      <div ng-controller="TagsCtrl">
                        <div class="list-group-item">
                          Project:
                          <select ng-model="selectedProject.ref" class="form-control">
                            <option value=""></option>
                            <option ng-repeat="tag in projects() | orderBy:'text'" value="{{tag.text}}">{{tag.text}}</option>
                          </select> 
                        </div>
                        <div class="list-group-item">
                          Context:
                          <select ng-model="selectedContext.ref" class="form-control">
                            <option value=""></option>
                            <option ng-repeat="tag in contexts() | orderBy:'text'" value="{{tag.text}}">{{tag.text}}</option>
                          </select>
                        </div>
                      </div>
                      <div class="list-group-item">
                        <button ng-click="addTask(); page.ref = 'show-tags'" class="btn btn-primary"> <!-- TODO this will go back even if new task wasn't saved. Hopefully I'll fix this when I try page routing. -->
                          Save
                        </button>
                      </div>
                    </form>
                  </div><!-- /list-group -->
                </div>

                <div ng-show="page.ref == 'edit-task'">
                  <div class="list-group">
                    <form>
                      <div class="list-group-item">
                        <textarea placeholder='Eg, "Hang shelves"' ng-model="editing.text" class="form-control"></textarea>
                      </div>
                      <div class="list-group-item">
                        <button ng-click="updateTask(); page.ref = 'show-tags'" class="btn btn-primary"> <!-- TODO this will go back even if new task wasn't saved. Hopefully I'll fix this when I try page routing. -->
                          Save
                        </button>
                      </div>
                      <div class="list-group-item">
                        <button ng-click="finishTask(); page.ref = 'show-tags'" class="btn btn-primary" style="background: green; color: white;">
                          Task Done
                        </button>
                      </div>
                    </form>
                  </div><!-- /list-group -->
                </div>

              </div> <!-- /TaskCtrl -->

              <div ng-show="page.ref == 'edit-tags'" ng-controller="TagsCtrl">
                <div class="list-group">
                  <form ng-submit="addTag()">
                    <input class="form-control" placeholder="Add saved tag" ng-model="newTag">
                  </form>

                  <div class="list-group-item"></div>

                  <div class="list-group-item">
                    <small>Deleting a tag will only delete it from the list of tags; it <b>won't delete any tasks</b> even if they use that tag.</small>
                  </div>
                  
                  <div ng-repeat="tag in presentTags() | orderBy:'text'" class="list-group-item" ng-click="deleteTag(tag)">
                    {{tag.text}} <i class="fa fa-times pull-right"></i>
                  </div>

          <!--      TODO save and cancel buttons instead of back
                    <li class="ui-body ui-body-b">
                      <fieldset class="ui-grid-a">
                          <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
                          <div class="ui-block-b"><button type="submit" data-theme="a">Save</button></div>
                        </fieldset>
                    </li>
           -->
                  </ul>
                </div><!-- /content -->
              </div><!-- /edit-tags page -->

              <div ng-show="page.ref == 'help'">
                <div class="list-group">
                  <div class="list-group-item">
                    <p>I love feedback! Please email it to
                    <a href="mailto:daniel@benamy.info">daniel@benamy.info</a>.</p>
                  </div>
                </div>
              </div><!-- /help page -->

            </div><!-- /scrollable-content -->
          </div><!-- /scrollable -->
        </div>
      </div>    
    </div>

  </body>
</html>
